<template>
  <!-- Slider main container -->
  <div ref="swiper" :class="[swiperContainerClass, 'swiper-container']">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <slot />
    </div>
    <div
      v-if="swiperOptions.pagination"
      :id="paginationId"
      class="swiper-pagination"
    />
    <div v-if="swiperOptions.navigation" class="swiper-navigation">
      <icon
        name="db-arrow-left"
        :size="24"
        class="swiper-navigation-prev"
        @click.native.stop="$swiper && $swiper.slidePrev()"
      />
      <span class="swiper-navigation-page">
        <span
          v-for="(_, index) in $slots.default"
          :key="index"
          class="swiper-navigation-page-item"
          :class="{ active: activeIndex === index }"
          @click.stop="$swiper && $swiper.slideTo(index)"
        />
      </span>
      <icon
        name="db-arrow-right"
        :size="24"
        class="swiper-navigation-next"
        @click.native.stop="$swiper && $swiper.slideNext()"
      />
    </div>
  </div>
</template>

<script>
import { Swiper, Navigation, Pagination, Autoplay, Keyboard } from 'swiper';
import { getRandomId } from '../utils/helper';
import Icon from './Icon.vue';

Swiper.use([Navigation, Pagination, Autoplay, Keyboard]);
const paginationId = getRandomId(16);

export default {
  name: 'SwiperContainer',
  components: { Icon },
  props: {
    swiperContainerClass: {
      type: [Object, Array, String],
      default: ''
    },
    initialSlide: {
      type: [Number],
      default: 0
    },
    direction: {
      type: [String],
      default: 'horizontal'
    },
    speed: {
      type: [Number],
      default: 300
    },
    autoHeight: {
      type: [Boolean],
      default: true
    },
    autoplay: {
      type: [Boolean, Object],
      default: () => ({
        delay: 3000,
        disableOnInteraction: false
      })
    },
    nested: {
      type: [Boolean],
      default: false
    },
    effect: {
      type: [String],
      default: 'slide'
    },
    watchOverflow: {
      type: [Boolean],
      default: false
    },
    spaceBetween: {
      type: [Number, String],
      default: 0
    },
    slidesPerView: {
      type: [Number, String],
      default: 'auto'
    },
    freeMode: {
      type: Boolean,
      default: false
    },
    slidesPerColumn: {
      type: [Number],
      default: 1
    },
    slidesPerColumnFill: {
      type: [String],
      default: 'column'
    },
    slidesPerGroup: {
      type: [Number],
      default: 1
    },
    centeredSlides: {
      type: [Boolean],
      default: false
    },
    centeredSlidesBounds: {
      type: [Boolean],
      default: false
    },
    slidesOffsetBefore: {
      type: [Number],
      default: 0
    },
    slidesOffsetAfter: {
      type: [Number],
      default: 0
    },
    centerInsufficientSlides: {
      type: [Boolean],
      default: false
    },
    allowTouchMove: {
      type: [Boolean],
      default: true
    },
    threshold: {
      type: [Number],
      default: 0
    },
    allowSlidePrev: {
      type: [Boolean],
      default: true
    },
    allowSlideNext: {
      type: [Boolean],
      default: true
    },
    preventClicks: {
      type: [Boolean],
      default: false
    },
    preventClicksPropagation: {
      type: [Boolean],
      default: false
    },
    slideToClickedSlide: {
      type: [Boolean],
      default: true
    },
    watchSlidesProgress: {
      type: [Boolean],
      default: false
    },
    watchSlidesVisibility: {
      type: [Boolean],
      default: true
    },
    preloadImages: {
      type: [Boolean],
      default: true
    },
    updateOnImagesReady: {
      type: [Boolean],
      default: true
    },
    loop: {
      type: [Boolean],
      default: true
    },
    pagination: {
      type: [Boolean, Object],
      default: () => ({
        el: `#${paginationId}`,
        type: 'bullets',
        clickable: true
      })
    },
    navigation: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      paginationId,
      swiperOptions: {},
      activeIndex: 0
    };
  },

  beforeDestroy() {
    if (this.$swiper) {
      this.$swiper.destroy();
    }
  },
  mounted() {
    this.init();
  },

  methods: {
    init() {
      const swiperOptions = {
        ...this.$props,
        observer: {
          type: [Boolean],
          default: true
        },
        observeParents: {
          type: [Boolean],
          default: true
        },
        observeSlideChildren: {
          type: [Boolean],
          default: true
        },
        on: {
          init: swiper => {
            swiper.update();
            swiper.updateAutoHeight();
          },
          imagesReady: swiper => {
            swiper.update();
            swiper.updateAutoHeight();
          },
          observerUpdate: swiper => {
            swiper.update();
            // eslint-disable-next-line no-unused-vars
            const currentSlide = swiper.slides;
            swiper.updateAutoHeight();
          },
          slideChange: swiper => {
            this.activeIndex = swiper.activeIndex;
          }
        }
      };
      this.swiperOptions = swiperOptions;
      const swiper = new Swiper(this.$refs.swiper, swiperOptions);
      // eslint-disable-next-line no-unused-vars
      const updateAutoHeight = swiper.updateAutoHeight;
      this.$swiper = swiper;
      this.$emit('ready', swiper);
    }
  }
};
</script>

<style lang="scss">
@import 'swiper/swiper-bundle.min.css';
</style>

<style lang="scss" scoped>
@import 'variable';

.swiper-navigation {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;

  &-page {
    margin: 0 16px;
    width: 72px;
    display: flex;
    &-item {
      flex: 1;
      height: 4px;
      position: relative;
      border-radius: 2px;
      cursor: pointer;
      &.active:after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        min-width: 100%;
        width: 100%;
        height: 100%;
        background: #006cff;
        border-radius: 2px;
      }
    }
  }

  &-prev,
  &-next {
    cursor: pointer;
  }
}
</style>
